<template>
  <div class="article">
    <div class="cover">
      <el-image fit="fill" src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" lazy />
    </div>
    <div class="content">
      <div class="title" title="${{ article.title }}">
        {{ article.title }}
      </div>
      <div class="info">
        <el-space :size="10" spacer="|">
          <span>{{ article.created }}</span>
          <span>{{ article.author?.username }}</span>
          <el-tag class="ml-2" type="info" v-for="(tag, index) in article.tags" :key="index">{{ tag }}</el-tag>
        </el-space>
      </div>
      <div class="body">
       {{ article.body }}
      </div>
      <div class="article-footer">
        <el-button link>
          <router-link :to="'/detail/' + article.id">
            查看原文...
          </router-link>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Article } from '@/types/index'

defineProps<{ article: Article }>()

</script>

<style>
.article {
  max-height: 30%;
  /* margin: 16px 32px; */
  padding: 16px;
  border-top: 1px var(--el-border-color) solid;
  display: flex;
  align-items: center;
  font-family: "Open Sans",sans-serif;
  /* border-bottom: 1px var(--el-border-color) solid; */
  /* width: calc(100% - var(--sidebar-width)); */
}

.article .cover .el-image {
  width: 200px;
}

.article .content {
  flex-grow: 5;
  padding-left: 16px;
}

.article .content .title {
  font-size: 2rem;
  line-height: 48px;
  overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.article .content .info {
  font-size: 1rem;
  font-weight: 400;
  color: #9eabb3;
}

.article .content .body {
  padding-top: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.article-footer {
  margin-top: 8px;
}
</style>
